<template>
  <div class="login-box">
    这是一个Vuex.state:{{num}}

    <el-card>
      <template slot="header">
        <h3>xxx系统登录</h3>
      </template>

      <el-form label-width="80px" ref="form">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
      </el-form>
      <el-divider/>
      <div class="bottom clearfix">
        <el-button @click="loginHandle" class="login-btn" type="success">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        }, num:this.$store.state.count
      }

    }, methods: {
      loginHandle() {
        alert('ts')
        this.axios({
          url: 'http://localhost:8080/java_web_war_exploded/sys/login',
          method: 'post',
          dataType: 'json',
          params: {
            username: this.form.username,
            password: this.form.password
          }
        }).then(function (res) {
          console.log(res.data)
        })
      }
    }
  }
</script>

<style scoped>

  .login-box {
    width: 580px;
    margin-left: 500px;
    margin-top: 150px;
  }

  .login-btn {
    width: 160px;
    margin-left: 200px;
  }

  .button {
    padding: 0;

  }

  clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
